<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <th:block th:replace="common/common :: common-head"/>
    <th:block th:replace="common/common :: common-table"/>
    <link type="text/css" th:href="@{/static/user/css/user.css}"/>
    <script type="application/javascript" th:src="@{/static/user/js/user.js}"></script>
    <title>Title</title>
</head>
<body>
    <!-- 用户页面主体 -->
    <div class="user-body">
        <div class="table-responsive">
            <div class="tool-bar" id="tool_bar">
                <div class="btn-group" role="group">
                    <button id="add_btn" type="button" class="btn btn-default">添加</button>
                    <button id="edit_btn" type="button" class="btn btn-default">修改</button>
                    <button id="delete_btn" type="button" class="btn btn-default">删除</button>
                </div>
            </div>
            <table id="user-table" class="table table-bordered table-hover">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody></tbody>
                <tfoot>
                    <tr>
                        <th>ID</th>
                        <th>用户名</th>
                        <th>手机号</th>
                        <th>邮箱</th>
                        <th>操作</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <!-- 添加用户模态窗口 -->
    <div id="user_add">
        <div id="add_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="add_label" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">

                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="add_label">添加用户</h4>
                    </div>

                    <div class="modal-body">
                        <form class="form-horizontal" id="create_form">
                            <div class="form-group">
                                <label for="create_username" class="col-md-2 control-label">用户名</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="userName" id="create_username">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="create_nickName" class="col-md-2 control-label">昵称</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="nickName" id="create_nickName">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="create_password" class="col-md-2 control-label">登录密码</label>
                                <div class="col-md-10">
                                    <input type="password" class="form-control" id="create_password" name="password"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="create_rePassword" class="col-md-2 control-label">重复密码</label>
                                <div class="col-md-10">
                                    <input type="password" class="form-control" name="rePassword" id="create_rePassword"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="create_email" class="control-label col-md-2">邮箱</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" id="create_email" name="email"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="create_phone" class="control-label col-md-2">手机号</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" id="create_phone" name="phone"/>
                                </div>
                            </div>
                        </form>
                    </div>


                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="save_btn" class="btn btn-primary">提交</button>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <!-- 修改用户模态窗口 -->
    <div id="user_edit">
        <div id="edit_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="edit_label" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 id="edit_label" class="modal-title">用户修改</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="edit_form">
                            <input type="hidden" name="id">
                            <div class="form-group">
                                <label for="edit_username" class="col-md-2 control-label">用户名</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="userName" id="edit_username">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="edit_nickName" class="col-md-2 control-label">昵称</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" name="nickName" id="edit_nickName">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="edit_email" class="control-label col-md-2">邮箱</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" id="edit_email" name="email"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="edit_phone" class="control-label col-md-2">手机号</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" id="edit_phone" name="phone"/>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" id="update_btn" class="btn btn-primary">提交</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="application/javascript">
    user.init();
</script>
</html>
